<template>
  <div class="dashboard-container">
    <vue-particles color="#212121" />
    <el-row style="justify-content: center; height: 100%;   flex-direction: row;position:relative;z-index:999;">
      <el-col style="min-width: 400px;height: 100%; width: 1200px;">
        <el-card
          v-loading="loading"
          style="height: 100%;   overflow-y: auto;"
          element-loading-text="正在进行智能财务分析，预计30s内完成，请稍后！"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <el-row>
            <el-col style="width: 280px">
              <el-button size="small" icon="el-icon-s-opportunity" type="primary" plain @click="sendQuestion">点击我，生成您的专属智能分析财务报告</el-button>
            </el-col>
            <el-col style="width: 240px">
              <el-select v-model="bookValue" style="width: 200px" placeholder="请选择" size="small" @change="selectChange">
                <el-option
                  v-for="item in bookList"
                  :key="item.id"
                  :label="item.book.tallyBookName"
                  :value="item.book.id"
                />
              </el-select>
            </el-col>
          </el-row>
          <el-card v-if="answer!==''" shadow="never">
            <v-md-editor
              v-model="answer"
              v-alterELDialogMarginTop="{marginTop:'5vh'}"
              toc-nav-position-right="true"
              :include-level="[1,2,3,4,5]"
              height="100%"
              mode="preview"
            />
          </el-card>
          <el-row v-if="answer==''">
            <el-col style="width: 400px; margin-left: 350px; margin-top: 200px; font-family: 'KaiTi', '楷体', serif;">
              <el-link type="primary" style="font-size: 20px; font-family: 'KaiTi', '楷体', serif; margin-left: 0.4em;">
                &emsp;&emsp;欢迎来到智能财务分析平台！我们自豪地推出一项创新功能，一键生成智能财务分析报告。通过调用先进的星火大模型接口，我们的工具能够迅速理解和分析您的财务数据，为您提供深入的见解和专业的财务分析！
              </el-link>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import tallyBook from '@/api/tally/tallyBook'
import xfxh from '@/api/tally/xfxh'

export default {
  data() {
    return {
      bookValue: '',
      bookList: [],
      entity: {},
      answer: '',
      loading: false
    }
  },
  // 生命周期函数：内存准备完毕，页面尚未渲染
  created() {
    this.getBookList()
  },

  // 生命周期函数：内存准备完毕，页面渲染成功
  mounted() {

  },
  methods: {
    getBookList() {
      tallyBook.getList().then(response => {
        this.bookList = response.data
        this.bookValue = this.bookList[0].book.id
      })
    },
    sendQuestion() {
      this.entity.roundId = this.bookValue
      this.loading = true
      xfxh.sendQuestion(this.entity).then(response => {
        this.answer = response.data
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#particles-js{
  width: 100%;
  height: calc(100% - 100px);
  position: absolute;   //设置absolute,其他DIV设置为relative，这样这个例子效果就作为背景
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.dashboard-container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  justify-content: center;
  position: absolute;
  background-size: cover;
  background-color: #99dee9;
}
</style>
